
import React from 'react'
import * as WorkAction  from '../../actions/WorkAction';
import { connect }  from 'react-redux';

class WorkOrderLine extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      data: {},
      lineData: {},
      lineEdit: {}
    }
  }

  componentWillReceiveProps(props) {
    // console.log(props.orderLines)
    if (props.data) {
      if (props.data.id != this.state.data.id) {
        var id = props.data.id + ""
        this.props.dispatch(
          WorkAction.loadWorkOrderLinesAsync({order_id: id})
        )
      }
      this.setState({
        data: props.data,
        lineEdit: {},
        lineData: props.orderLines?props.orderLines: this.state.lineData
      })
    }
  }

  onChange(event, key) {
    var value = $(event.target).val();

    var data = this.state.lineEdit;
    data[key] = value;

    this.setState({
      lineEdit: data
    })
  }

  onOrderLineCreate(event) {
    var data = this.state.lineEdit,
        title = data.title,
        price = parseFloat(data.price),
        count = parseInt(data.count)

    if (!title || title.trim().length == 0) {
      alert("请输入项目内容!")
      return
    }
    else if (!price || isNaN(price)) {
      alert("请输入正确的价格!")
      return
    }
    else if (!count || isNaN(count)) {
      alert("请输入正确的数量!")
      return
    }

    this.props.dispatch(
      WorkAction.addOrderLineAsync({
        title: title,
        price: price,
        count: count,
        id: this.props.data.id,
        order_id: this.props.data.id,
        unit_desc: this.props.unit_desc,
        offset: this.props.offset,
        limit: this.props.limit
      })
    )
  }

  onOrderLineDelete(orderLine) {
    if (confirm("确定要删除该项目吗?")) {
      this.props.dispatch(
        WorkAction.deleteWorkOrderLineAsync({
          order_line_id: orderLine.id,
          order_id: this.props.data.id,
          unit_desc: this.props.unit_desc,
          offset: this.props.offset,
          limit: this.props.limit
        })
      )
    }
  }

  pad(n) {
    return n < 10 ? "0"+n : n;
  }

  renderOrderLines() {
    var self = this
    var content = []
    var orderLines = self.state.lineData
    if (orderLines && orderLines.length > 0) {
      orderLines.forEach(function(orderLine) {
        content.push((
          <tr>
            <td>{orderLine.title}</td>
            <td>{parseFloat(orderLine.price).toFixed(2)}</td>
            <td>{orderLine.count}</td>
            <td>{parseFloat(orderLine.amount).toFixed(2)}</td>
            <td>
              <a className="edit" onClick={(event)=>self.onOrderLineDelete(orderLine)}>删除</a>
            </td>
          </tr>
        ))
      })
    }
    return content
  }

  render() {
    var self = this;
    var order_number
    var data = self.props.data
    if (data) {
      order_number = data.order_number
    }

    return (
      <div className="modal fade work-detail" id="work-detail" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div className="modal-dialog" role="document">
          <div className="modal-content">
            <div className="modal-header">
              <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 className="modal-title" id="WechatUser-modal-label">{"维修项目 "+order_number}</h4>
            </div>
            <div className="modal-body">
              <div className = "panel panel-default">
                <div className = "panel-heading">新建项目</div>
                <div className = "panel-body">
                  <div className="form-group">
                    <label for="workUnit">项目</label>
                    <input ref="workUnit" type="text" className="form-control"
                            id="workUnit" placeholder="项目" value={this.state.lineEdit.title}
                            onChange={(event)=>this.onChange(event, 'title')}
                            />
                  </div>
                  <div className="form-group">
                    <label for="workUnit">价格(元)</label>
                    <input ref="workUnit" type="text" className="form-control"
                            id="workUnit" placeholder="价格" value={this.state.lineEdit.price}
                            onChange={(event)=>this.onChange(event, 'price')}
                            />
                  </div>
                  <div className="form-group">
                    <label for="workUnit">数量</label>
                    <input ref="workUnit" type="number" className="form-control"
                            id="workUnit" placeholder="数量" value={this.state.lineEdit.count}
                            onChange={(event)=>this.onChange(event, 'count')}
                            />
                  </div>
                  <button type="button" className="btn btn-primary"
                          onClick={(event)=>this.onOrderLineCreate(event)}>添加</button>
                </div>
              </div>
                <div className="panel panel-default">
                  <div className="panel-heading">已添加</div>
                  <div className="panel-body">
                    <table className="table table-hover">
                      <thead>
                        <tr className="table-title">
                          <th>项目</th>
                          <th>价格(元)</th>
                          <th>数量</th>
                          <th>总价(元)</th>
                          <th className="infoTh">编辑</th>
                        </tr>
                      </thead>
                      <tbody>
                        {self.renderOrderLines()}
                      </tbody>
                    </table>
                  </div>
                </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

const mapStateToProps = (state, ownProps) => {
  return {
          orderLines: state.workOrderLine.data
         }
}

export default connect(mapStateToProps)(WorkOrderLine)
